<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";


//引入管理员相关的小仓库
import useAdminStore from '@/store/modules/admin'; // 命名导入
let adminStore = useAdminStore();

// 定义响应式变量并指定类型
// 定义数据类型
interface ClassData {
  classId: number;
  adminUsername: string;
  className: string;
  classStudentNumber: number;
  adminId: number;
}
const tableData = ref<ClassData[]>([]); // 使用ClassData数组类型
let searchInput = ref("");


const page = reactive({ page: 1, pageSize: 10, total: 0 });

// 在组件挂载时调用fetchTableData
onMounted(async () => {
  try {
    console.log('Component mounted');
    await adminStore.fetchTableData({ page: 1, pageSize: 10 });
    console.log('Table data fetched:', adminStore.tableData);
    tableData.value = adminStore.tableData; // 更新组件内的tableData
  } catch (error) {
    console.error('Error fetching table data:', error);
  }
});
// 搜索班级的方法
const searchClassByName = async () => {
  await adminStore.fetchTableData({
    page: page.page,
    pageSize: page.pageSize,
    name: searchInput.value,
  });
  tableData.value = adminStore.tableData; // 更新组件内的tableData
  page.total = adminStore.page.total; // 更新总条数
};


const handleCurrentChange = async (page: any, size: any) => {
  console.log(page, size);
  await adminStore.fetchTableData({
    page: page.page,
    pageSize: page.pageSize,
    name: searchInput.value,
  });
  tableData.value = adminStore.tableData; // 更新组件内的tableData
  page.total = adminStore.page.total; // 更新总条数
}
const handleSizeChange = async (newSize: number) => {
  page.pageSize = newSize; // 更新每页条数
  await adminStore.fetchTableData({
    page: page.page,
    pageSize: newSize, // 使用新的每页条数
    name: searchInput.value,
  });
  tableData.value = adminStore.tableData; // 更新组件内的tableData
  page.total = adminStore.page.total; // 更新总条数
}


//新增班级的js
// 新增班级相关状态
const dialogFormVisible = ref(false); // 控制对话框显示/隐藏
const newClassName = ref(''); // 收集新班级名称
// 提交表单，添加新班级

// 打开对话框
const openDialog = () => {
  dialogFormVisible.value = true;
};

// 关闭对话框
const closeDialog = () => {
  dialogFormVisible.value = false;
};
const submitForm = async () => {
  if (newClassName.value.trim() === '') {
    alert('请输入班级名称');
    return;
  }

  await adminStore.addClass({
    className: newClassName.value,
    adminId: '', // 默认值或根据实际情况设置
    adminUsername: '', // 同上

  });

  // 清空输入框并关闭对话框
  newClassName.value = '';
  dialogFormVisible.value = false;

  // 刷新表格数据
  await adminStore.fetchTableData({
    page: page.page,
    pageSize: page.pageSize,
    name: searchInput.value,
  });
  tableData.value = adminStore.tableData; // 更新组件内的tableData
  page.total = adminStore.page.total; // 更新总条数
}



//删除班级的js
const handleDelete = async (index: number, row: ClassData) => {
  // 确认删除
  const confirmDelete = window.confirm('确定要删除该班级吗？');
  if (!confirmDelete) return;

  try {
    // 调用删除方法
    await adminStore.deleteClass(row.classId);

    // 删除成功后从表格数据中移除该行
    tableData.value.splice(index, 1);

    // 刷新表格数据（如果需要）
    await adminStore.fetchTableData({
      page: page.page,
      pageSize: page.pageSize,
      name: searchInput.value,
    });
    tableData.value = adminStore.tableData; // 更新组件内的tableData
    page.total = adminStore.page.total; // 更新总条数

    alert('删除成功！');
  } catch (error) {
    console.error('删除失败:', error);
    alert('删除失败，请稍后再试！');
  }
};

</script>

<template>
  <div>
    <div class="top">
      <el-input type="text" v-model="searchInput" class="search-input">
        <template #suffix>
          <el-icon class="el-input__icon" @click="searchClassByName">
            <search />
          </el-icon>
        </template>
      </el-input>
      <el-button type="primary" style="float: right" @click="openDialog">新增班级</el-button> <!-- 点击打开对话框 -->
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="className" label="班级名" width="180" />
      <el-table-column prop="classStudentNumber" label="班级人数" width="180" />
      <el-table-column prop="adminUsername" label="老师姓名" />
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">解散班级
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="page.page" v-model:page-size="page.pageSize" background
      layout="prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />

    <!-- 对话框 -->
    <el-dialog title="新增班级" v-model="dialogFormVisible" @close="closeDialog">
      <el-form :model="{ newClassName }">
        <el-form-item label="班级名" :label-width="100">
          <el-input v-model="newClassName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<style scoped lang="scss">
.top {
  margin-bottom: 15px;

  .search-input {
    width: 50%;

  }
}
</style>